<!--  -->
<template>
  <div :style="{ paddingTop: '40px', position: 'relative' }">
    <div ref="chart" class="position-center" :style="{ width: '720px', height: '540px' }"></div>
    <div :style="{ position: 'absolute', top: '30px', left: '50px' }">
      <div class="title">全国医院分布</div>
      <div class="flex just-center">
        <div class="desc">员工人数</div>
        <div class="count">{{ count ?? 355 }}</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
    import { nextTick, onMounted, ref, watch } from 'vue'
    import * as echarts from 'echarts'
    import { getMapOption } from '@/utils/options'
    import { LineData } from '../utils/interface'
    import chinaMapData from '@/assets/map/chinaMapData.json'
  import { GeoInfoResponse } from '@/api'

    interface Props {
      data: GeoInfoResponse [] []
      count?: number
    }

    const chart = ref()
    const props = defineProps<Props>()

    const renderChart = () => {
      echarts.dispose(chart.value)
      const option = getMapOption('上海',props.data);
      const eChart = echarts.init(chart.value)
      eChart.setOption(option)
    }

    watch(
      props,
      () => {
        renderChart()
      },
      {
        deep: true
      }
    )

    onMounted(() => {
      nextTick(() => {
        echarts.registerMap('中国', chinaMapData as any)
        renderChart()
      })
    })
</script>
<style lang="scss" scoped>
  .title {
    font-size: 16px;
    color: #fff;
    font-weight: 500;
    margin-bottom: 20px;
  }

  .desc {
    font-size: 16px;
    color: #fff;
    margin-right: 20px;
  }

  .count {
    font-size: 36px;
    color: #fff;
  }
</style>
